<template>
	<view class="uiwu">
		<view class="uiwu-location uiwu-flex-align" @tap.stop="uiwu.openWindow('/pages/user/address?select=true')">
			<image src="/static/location.png" mode="widthFix"></image>
			<view v-if="dataInfo.address_info" class="in uiwu-flex-column">
				<text>{{dataInfo.address_info.real_name}}  {{dataInfo.address_info.phone}}</text>
				<text>{{dataInfo.address_info.province}}{{dataInfo.address_info.city}}{{dataInfo.address_info.district}}{{dataInfo.address_info.detail}}</text>
			</view>
			<view v-else class="noAddress">请选择收货地址</view>
			<uiwu-icon type="arrowright" size="18" color="#999"></uiwu-icon>
		</view>
		<scroll-view scroll-x >
			<view class="uiwu-list uiwu-flex-align">
				<view class="item" v-for="(item,index) in dataInfo.grab_prize_list" :key="index">
					<image :src="item.product_image" mode="aspectFill"></image>
					<text>{{getDay(item.expire_time)}}天后过期</text>
				</view>
			</view>
		</scroll-view>
		<view class="uiwu-price uiwu-flex-space">
			<view>
				物流费用
				<text>（{{dataInfo.store_free_postage}}件奖品以上包邮）</text>
			</view>
			<view>￥{{dataInfo.postage}}</view>
		</view>
		<view class="uiwu-payment">
			<view class="title">支付方式</view>
			<radio-group @change="changeGroup">
				<view class="radio-group uiwu-flex-column">
					<label class="uiwu-flex-space">
						<image src="../../static/wxpay.png" mode="widthFix"></image>
						<text>微信</text>
						<radio color="#EF821E" value="weixin" />
					</label>
					<label class="uiwu-flex-space">
						<image src="../../static/apply.png" mode="widthFix"></image>
						<text>支付宝</text>
						<radio color="#EF821E" value="alipay" />
					</label>
				</view>
			</radio-group>
		</view>
		<uiwu-footer>
			<view class="uiwu-footer uiwu-flex-space">
				<view class="left">合计：<text>￥{{dataInfo.postage}}</text></view>
				<view class="btn uiwu-flex-center" @tap="submit">提交订单</view>
			</view>
		</uiwu-footer>
	</view>
</template>

<script setup lang="ts">
	import { onLoad , onUnload } from '@dcloudio/uni-app';
	import { prizeConfirm, prizeConfirmOrder } from '@/api/prize';
	import { ref } from 'vue';
	import { uiwu } from '../../config/config';
	const pay_type = ref(null)
	const idArr = ref<Array<string|number>>(null)
	const dataInfo = ref<object>({
		address_info:{},
		grab_prize_list:[]
	})
	const getprizeConfirm = async (ids:any) : Promise<any> => {
		const {data} = await prizeConfirm({
			grab_prize_id:ids
		})
		dataInfo.value = data
	}
	const changeGroup = ({detail:{value}}) => {
		pay_type.value = value
	}
	/**
	 * 获取到期时间
	 */
	const getDay = (time) => {
		const currentTimestamp = Math.floor(Date.now() / 1000);
		const daysDifference  = time - currentTimestamp
		return Math.floor( daysDifference / (60 * 60 * 24)) || 0
	}
	const submit = async () : Promise<any> => {
		if(!dataInfo.value.address_info?.id) return uiwu.toast('请选择收货地址')
		if(!pay_type.value) return uiwu.toast('请选择支付方式')
		uiwu.loading('提交中...')
		let code = null;
		if(pay_type.value == 'weixin') code = await getWeiXinCode()
		const {data} = await prizeConfirmOrder({
			grab_prize_id:idArr.value,
			address_id:dataInfo.value.address_info.id,
			pay_type:pay_type.value,
			routine_code:code
		})
		if(data.is_free_postage){
			if(pay_type.value != 'weixin') {
				uiwu.ailpay(data.pay_info).then(()=>{
					uiwu.toast('支付成功')
					uiwu.hideloading()
					uni.navigateBack()
				}).catch(()=>{
					uiwu.hideloading()
					uiwu.toast('支付取消')
				})
			}else{
				uiwu.wxpay(data.pay_info).then((res)=>{
					uiwu.toast('支付成功')
					uiwu.hideloading()
					uni.navigateBack()
				})
			}
			return
		}
		uiwu.hideloading()
		uiwu.toast('提交成功')
		uni.navigateBack()
	}
	/**
	 * 获取code
	 */
	const getWeiXinCode = () => {
		return new Promise((resolve,reject)=>{
			uni.login({
				provider:'weixin',
				success: ({code}) => {
					resolve(code)
				},
				fail: (err) => {
					reject(err)
				}
			})
		})
	}
	onLoad(({ids})=>{
		idArr.value = JSON.parse(ids)
		getprizeConfirm(JSON.parse(ids))
		uni.$on('changeAddress',(res)=>{
			dataInfo.value.address_info = res
			console.log(dataInfo.value.address_info);
		})
	})
	onUnload(()=>{
		uni.$off('changeAddress')
	})
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
	}
	.uiwu{
		padding: 24rpx;
	}
	.uiwu-location{
		width: 100%;
		height: 146rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 0 18rpx;
		image{
			width: 40rpx;
			margin-right: 18rpx;
		}
		.in{
			flex:1;
			text{
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
				&:nth-child(1){
					font-size: 28rpx;
					font-weight: 500;
					color: #231815;
					margin-bottom: 10rpx;
				}
			}
		}
		.noAddress{
			flex: 1;
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
		}
	}
	.uiwu-list{
		padding: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		.item{
			flex-shrink: 0;
			width: 176rpx;
			height: 176rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			position: relative;
			image{
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
			text{
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 40rpx;
				background: rgba(#222222,0.5);
				border-radius: 20rpx;
				left: 0;
				line-height: 40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	.uiwu-price{
		width: 100%;
		height: 104rpx;
		border-radius: 16rpx;
		background-color: #fff;
		margin-top: 20rpx;
		padding: 0 24rpx;
		view{
			font-size: 28rpx;
			font-weight: 500;
			color: #231815;
			text{
				color: #999999;
			}
		}
	}
	.uiwu-payment{
		margin-top: 20rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		.title{
			font-size: 28rpx;
			font-weight: bold;
			color: #444444;
			margin-bottom: 12rpx;
		}
		.radio-group{
			label{
				margin: 20rpx 0;
			}
			text{
				flex: 1;
				font-size: 28rpx;
				font-weight: bold;
				color: #231815;
			}
			radio{
				transform: scale(0.8);
			}
		}
		image{
			width: 44rpx;
			margin-right: 20rpx;
		}
	}
	.uiwu-footer{
		padding: 16rpx 24rpx;
		width: 100%;
		background-color: #fff;
		.left{
			font-size: 28rpx;
			font-weight: bold;
			color: #444;
			text{
				font-weight: bold;
				color: #FF5100;
			}
		}
		.btn{
			width: 220rpx;
			height: 72rpx;
			background: #EF821E;
			border-radius: 36rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 1;
		}
	}
</style>
